<script setup>
import {ref} from "vue";
let status = ref(true)

// 变量存储是外部样式类名称
const colorActive = ref("active")
const lineActive = ref("line")
</script>

<template>
<div v-bind:class="status? 'active': 'line'">Hello, Vue!</div>
<div v-bind:class="status? colorActive: lineActive">Hello, Vue!</div>
</template>

<style scoped>
.active {
  color: red;
}

.line {
  text-decoration: underline
}
</style>